<template>
  <div class="container">
    <div class="nav">
      <div class="top">
        <a @click="$router.go(-1)">
          <i></i>
        </a>

        <h5 v-if="num == 1">添加新地址</h5>
        <h5 v-if="num == 2">修改地址</h5>

        <span></span>
      </div>
    </div>

    <div class="main">
      <!-- 收货人 -->
      <div class="first">
        <input type="text" placeholder="收货人" v-model="name" />
      </div>
      <!-- 联系电话 -->
      <div class="second">
        <input type="text" placeholder="联系电话" v-model="phone" />
      </div>
      <!-- 地区 -->
      <div class="third">
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="地区"
          placeholder="请选择所在地区"
          @click="show = true"
        />
        <van-popup v-model:show="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
      </div>

      <!-- 详细地址 -->
      <div class="forth">
        <input
          type="text"
          placeholder="请输入详细地址,如某某小区2-3-203"
          v-model="datail"
        />
      </div>
    </div>

    <!-- 是否默认 -->
    <div class="main2">
      <van-cell center title="默认地址">
        <template #right-icon>
          <van-switch v-model="checked" size="24" />
        </template>
      </van-cell>
    </div>

    <div class="main3" v-if="num == 2" @click="del">删除地址</div>

    <footer>
      <!-- 添加信息 -->
      <div class="box" @click="addlocal">保存</div>
      <!-- 修改信息 -->
      <!-- <div class="box">保存</div> -->
    </footer>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";

import router from "@/router";
import { useRoute } from "vue-router";
export default {
  //接受父组件方法
  emits: ["addaddress"],
  setup(props, { emit }) {
    //获得传来的数据
    let route = useRoute();
    let num = ref(route.query.num);
    //输入的信息
    let data = reactive({
      name: "",
      phone: "",
      large: "",
      datail: "",
    });
    // 地址选择也
    const show = ref(false);
    const fieldValue = ref("");
    const cascaderValue = ref("");
    // 选项列表，children 代表子选项，支持多级嵌套
    const options = [
      {
        text: "广东省",
        value: "330000",
        children: [
          {
            text: "广州市",
            value: "330100",
            children: [
              {
                text: "从化区",
                value: "330100",
              },
              {
                text: "天河区",
                value: "330101",
              },
            ],
          },
          {
            text: "深圳市",
            value: "330101",
            children: [
              {
                text: "宝安区",
                value: "330100",
              },
              {
                text: "南山区",
                value: "330101",
              },
            ],
          },
        ],
      },
      {
        text: "广西壮族自治区",
        value: "320000",
        children: [
          {
            text: "南宁市",
            value: "320100",
            children: [
              {
                text: "青秀区",
                value: "330100",
              },
              {
                text: "武鸣区",
                value: "330101",
              },
            ],
          },
          {
            text: "梧州市",
            value: "320101",
            children: [
              {
                text: "岑溪镇",
                value: "330100",
              },
            ],
          },
        ],
      },
    ];
    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      show.value = false;
      fieldValue.value = selectedOptions.map((option) => option.text).join("/");
    };
    // 默认选项
    const checked = ref(false);

    //添加输入的地址信息
    let addlocal = () => {
      //有值的话就修改
      if (route.query.id) {
        //取出
        let change = JSON.parse(window.localStorage.getItem("address"));
        //查找
        let index = change.findIndex((item) => {
          return item.id == route.query.id;
        });
        //删除,插入
        change.splice(index, 1,{
          id: parseInt(route.query.id),
          name: data.name,
          phone: data.phone,
          large: fieldValue.value,
          datail: data.datail,
          checked: checked.value,
        });
        window.localStorage.setItem("address", JSON.stringify(change));
        router.go(-1)
        //没值的话就添加
      } else {
        //传输入的参数
        emit("addaddress", {
          id: 10,
          name: data.name,
          phone: data.phone,
          large: fieldValue.value,
          datail: data.datail,
          checked: checked.value,
        });

        router.go(-1)
      }
    };
    // 如果有id值则执行
    if (route.query.id) {
      //在本地数据中查找出来
      let change = JSON.parse(window.localStorage.getItem("address"));
      //对应下标
      let index = change.findIndex((item) => {
        return item.id == route.query.id;
      });

      data.name = change[index].name;
      data.phone = change[index].phone;
      data.datail = change[index].datail;
      fieldValue.value = change[index].large;
      checked.value = change[index].checked;
    }

    // 点击删除
    let del = () => {
      console.log("1");
      //取出
      let change = JSON.parse(window.localStorage.getItem("address"));
      //查找
      let index = change.findIndex((item) => {
        return item.id == route.query.id;
      });
      //删除
      change.splice(index, 1);
      //保存进本地
      window.localStorage.setItem("address", JSON.stringify(change));

      router.go(-1)
    };

    return {
      ...toRefs(data),
      // 详细地址的参数
      show,
      options,
      onFinish,
      fieldValue,
      cascaderValue,
      //默认地址的参数
      checked,
      //输入的信息
      addlocal,
      //判断是否显示删除数据
      num,
      //点击删除
      del,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/base.css";
// 设置input的默认字体颜色
input::-webkit-input-placeholder {
  /* WebKit browsers，webkit内核浏览器 */
  color: #cdcdcd;
  font-size: 16px;
}
::v-deep .van-field__label {
  font-size: 16px;
}
::v-deep .van-cell {
  padding: 10px 0px;
}
.container {
  height: 667px;
  background-color: #f6f7f8;
  position: relative;
}
.main,
.nav {
  background-color: #ffffff;
}
.nav {
  display: flex;
  flex-direction: column;
}

.nav .top {
  display: flex;
  margin-left: 15px;
  align-items: center;
  justify-content: space-between;
}
.nav .top i {
  background-position: 0px 11px;
  display: block;
  background-image: url(../assets/img/下载.png);
  background-repeat: no-repeat;
  width: 48px;
  height: 48px;
  background-size: 22px 22px;
}
.nav .top span {
  display: block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  color: #5f79d0;
  font-size: 19px;
}
.nav .top h5 {
  height: 48px;
  line-height: 48px;
  font-weight: bold;
  font-size: 20px;
  margin: 0px;
}
.main {
  display: flex;
  flex-direction: column;
  padding: 0px 15px;
}
.main .first input {
  width: 100%;
  height: 48px;
  border-bottom: 1px solid #e5e6e9;
}
.main .second input {
  height: 48px;
  border-bottom: 1px solid #e5e6e9;
  width: 100%;
}
.main .third {
  height: 48px;
  border-bottom: 1px solid #e5e6e9;
  width: 100%;
}
.main .forth input {
  height: 75px;
  border-bottom: 1px solid #e5e6e9;
  width: 100%;
}
input {
  outline: none;
  border: none;
}
.main2 {
  background-color: #ffffff;
  //   height: 56px;
  //   line-height: 56px;
  margin-top: 10px;
  padding: 0px 15px;
  color: #060007;
}
.main3 {
  background-color: #ffffff;
  height: 54px;
  line-height: 54px;
  margin-top: 10px;
  padding: 0px 15px;
  color: #ff3213;
}
footer {
  position: sticky;
  top: 667px;

  height: 66px;
  box-shadow: 0 -3px 3px 0px #d2d3d4;
  background-color: #ffffff;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  padding: 0px 15px;
  display: flex;
  align-items: center;
}
footer .box {
  height: 40px;
  line-height: 40px;
  flex: 1;
  text-align: center;
  border-radius: 20px;
  background-color: #5468ff;
  color: #fff2fa;
}
</style>
